<template>
  <!--    tree-->
  <template v-if="(tempItem.typeFlag == '1_1'||tempItem.typeFlag == '1_2') && tempItem.textResults?.length>0" >
      <div class="wrapper non-split">
          <span class="label" style='width: 120px'>
          <template  v-if="tempItem.typeFlag == '1_1'">
                <input
                  type="checkbox"
                  v-model="tempItem.checked"
                  :disabled="resultIsDisabled()"
                  @change="checkTreeItemNavChange"
                >
            {{ tempItem.tempItemNa }}
          </template>
          <template v-if="tempItem.typeFlag == '1_2'">
             {{tempItem.tempItemNa}}
          </template>
          </span>
        <div class="branch lv1">
          <template  v-for="(textResult) in tempItem.textResults">
            <div class="entry"><span class='label'>
              <input type="checkbox"
                v-model="textResult.checked"
                :disabled="resultIsDisabled()"
                @change="checkTreeTextChange($event, textResult)"/>
            {{ textResult.result }}
            </span></div>
          </template>
        </div>
      </div>
  </template>
  <!--        checkbox-->
  <template v-if="tempItem.typeFlag == '1_1'&&tempItem.textResults?.length==0" >
    <div class='resultRootClass'>
      <input
        type="checkbox"
        v-model="tempItem.checked"
        :disabled="resultIsDisabled()"
        @change="checkTreeItemNavChange"
      >
      {{ tempItem.tempItemNa }}
    </div>
  </template>

  <!--        checkbox-->
  <template v-if="tempItem.typeFlag == '1'">
    <div class='tempItemClass'>
      <div class='tempItemTitle'>
        {{ tempItem.tempItemNa }}：
      </div>
      <div v-for="(textResult) in tempItem.textResults" class='resultClass'>
        <input type="checkbox"
               v-model="textResult.checked"
               :disabled="resultIsDisabled()"
               @change="checkTreeTextChange($event, textResult)"/>
        {{ textResult.result }}
      </div>
      <br/>
    </div>
  </template>

<!--        textarea-->
        <template  v-if="tempItem.typeFlag == '2'||tempItem.typeFlag == '3'">
            <div class='tempItemtext'>
              <div class='tempItemTitle'>
                {{ tempItem.tempItemNa }}：
              </div>
              <template v-if='resultIsDisabled()'>
                <div class='tempItemDesc'>
                  <p>
                    {{tempItem.resultDesc}}
                  </p>
                </div>
              </template>
            <template v-else>
              <div class='tempItemDesc'>
                <vxe-textarea v-model="tempItem.resultDesc" :placeholder="'请输入'+tempItem.tempItemNa"
                              v-if="(tempItem.typeFlag == '3' && !IsEmpty(tempItem.typeCode))"
                              :rows='IsEmpty(tempItem.textHeight)?tempItem.textHeight:1'
                              @focusout="onSubmit(tempItem)"
                              :class='tempItem.tempItemNo'
                              @focus="showTypeCodeDrawer(tempItem)"
                              :disabled="resultIsDisabled()"></vxe-textarea>
                <vxe-textarea v-if="!(tempItem.typeFlag == '3' && !IsEmpty(tempItem.typeCode))"
                              v-model="tempItem.resultDesc" :placeholder="'请输入'+tempItem.tempItemNa"
                              :rows='IsEmpty(tempItem.textHeight)?tempItem.textHeight:1'
                              @focusout="onSubmit(tempItem)" :disabled="resultIsDisabled()"></vxe-textarea>
              </div>
            </template>
          </div>
        </template>

<!--    img-->
        <template v-if="tempItem.typeFlag == '4'">
          <el-descriptions :size='size'>
            <el-descriptions-item :label="tempItem.tempItemNa+'：'">
              <p>
                <img :src='apiPath+item.imageUrl' v-for='(item,index) in rptImages'>
              </p>
            </el-descriptions-item>
          </el-descriptions>
        </template>
    <FormEditDrawer ref="diagnosTempDrawerRef" @sltDiagnosTempInfo="onSubmit">
    </FormEditDrawer>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType, onMounted, inject, defineEmits,defineExpose,crypto } from 'vue';
import { IsEmpty, formatDateTime } from '@/utils/common'; //导入工具函数
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import FormEditDrawer from './FormEditDrawer.vue';
import { AppStore } from '@/stores/store';
import { FormInstance,ComponentSize } from 'element-plus';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
const apiPath = ref((window as any).apiUrl.VITE_SERVER_URL);
let store = AppStore();
let orgId = ref(null);
let iloading = ref(false);
let diagnosTempDrawerRef = ref(null);
const size = ref<ComponentSize>('large');
const results=ref([]);

defineExpose({
  onSubmit
});

const proxyEmit = defineEmits(['updateTestList']);
// 父组件传值
let props = defineProps({
  labMainInfoObj: { type: Object as PropType<any>, required: true },
  tempItem: { type: Object as PropType<any>, required: true },
  rptImages: { type: Array as PropType<[]>, required: true }
}) as any;

onMounted(() => {
  if(!IsEmpty(props.tempItem.resultDesc)){
    results.value = props.tempItem.resultDesc?.split(',');
  }else{
    results.value = [];
  }
  orgId = store.userInfo.orgId;
});

// 方法定义区 =============
//初始化表单
function initFrom() {
  props.tempItem.rptGroup = props.labMainInfoObj.rptGroup;
  props.tempItem.instrCode = props.labMainInfoObj.rptGroup;
  props.tempItem.instrNa = props.labMainInfoObj.rptGroupNa;
  props.tempItem.rptGroupName = props.labMainInfoObj.rptGroupNa;
  props.tempItem.isNeedToReport = 1;
  props.tempItem.itemNo = props.tempItem.tempItemNo;
  props.tempItem.itemNa = props.tempItem.tempItemNa;
  props.tempItem.sampleNo = props.labMainInfoObj.sampleNo;
  props.tempItem.sampleda = props.labMainInfoObj.sampleda;
  props.tempItem.reqNo = props.labMainInfoObj.reqNo;
  props.tempItem.maininfoId = props.labMainInfoObj.id;
}
// 保存信息
function onSubmit(item: any) {
  if (!IsEmpty(item.resultDesc)) {
    initFrom();
    //props.tempItem.testResult = props.tempItem.resultDesc?.slice(0, 255); //截取前249个字符
    submitForm(item);
  }
}
// 保存树形结构root节点选中信息原生组件
function checkTreeItemNavChange(event) {
  initFrom();
  props.tempItem.testResult =event.target.checked?"isChecked":"unChecked";
  props.tempItem.checked=event.target.checked;
  submitForm(props.tempItem);
}
// 保存树形结构root节点选中信息
function checkTreeItemChange(checked) {
  initFrom();
  props.tempItem.testResult =checked?"isChecked":"unChecked";
  props.tempItem.checked=checked;
  submitForm(props.tempItem);
}
// 保存树形结构子节点选中信息
function checkTreeTextChange(event, textResult) {
  initFrom();
  const checkedIds = props.tempItem.textResults.filter(item => item.checked)
    .map(item => item.id);
  //textResult.checked=event.target.checked 原生访问
  if(checkedIds.length>0){
    props.tempItem.resultDesc =checkedIds.join(',');
  }else{
    props.tempItem.resultDesc ="";
  }
  submitForm(props.tempItem);
}
// 保存树形结构子节点选中信息
function checkItemGroupChange(value: string[]) {
  initFrom();
  props.tempItem.resultDesc=value?.join(',');
  submitForm(props.tempItem);
}
// 更新选中状态
function checkTreeItemResultChange(checked, textResult) {
  initFrom();
  props.tempItem.testResult =checked?"isChecked":"unChecked";
  textResult.checked=checked;
}
// 保存
const submitForm = (item: any) => {
  const url = '/lab/rptResult/saveImgTxtRptValue';
  proxy.$http
    //注意此处的数据条数
    .post(url, item)
    .then((res: any) => {
      if (res.status.code === 1) {
        if (IsEmpty(props.labMainInfoObj.id)) {
          //proxy.$emit
          props.labMainInfoObj.id=res.data.maininfoId;
          proxyEmit('updateTestList', { isSelCurRow: true, isRefreshRptResult: false, mainInfoId: res.data.maininfoId });
        }
      } else {
        VxeMessage(res.status.msg, VxeNotifyType.error);
      }
      iloading.value = false;
    })
    .catch((err: any) => {
      iloading.value = false;
    });
};

function showTypeCodeDrawer(item) {
  showDiagnosTempDrawer(item);
}

function showDiagnosTempDrawer(item) {
  diagnosTempDrawerRef.value.initPage(item);
}

function resultIsDisabled() {
  if (!IsEmpty(props.labMainInfoObj) && props.labMainInfoObj.isChk == '2') {
    return true;
  } else {
    return false;
  }
}
/**审核验证，项目对照，检验结果数量是否相等 */
async function reviewValidateVsCountIsEqual() {
  let res = false;
  try {
    res = false;
  } catch (error) {}
  return res;
}
</script>

<style lang="scss" scoped>

p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
}
.resultClass{
  margin-right: 10px;
}
.tempItemClass{
  min-height: 28px;
  .tempItemTitle{
    width: 110px;
    text-align: right;
  }
  .tempItemDesc{
    width: calc(100% - 120px);;
    text-align: left;
  }
   div{
     float: left;
   }
}
.tempItemtext{
  min-height: 50px;
  padding-bottom: 8px;
  .tempItemTitle{
    width: 110px;
    text-align: right;
  }
  .tempItemDesc{
    width: calc(100% - 120px);;
    text-align: left;
  }
   div{
     float: left;
   }
}
.resultRootClass{
  padding-left: 28px;
  line-height: 32px;
}

.imgArea {
  min-height: 50px;
  margin-top: 4px;
  font-size: 14px;
  p {
    text-align: center;
    img {
      width: 40%;
      padding: 5px;
    }
  }
  .textArea {
    min-height: 30px;
  }
}
.wrapper{
  position: relative;
  .branch {
    position: relative;
    margin-left: 170px;
  }
  .branch:before {
    content: "";
    width: 10px;
    border-top: 2px solid #e1dcce;
    position: absolute;
    left: -25px;
    top: 50%;
    margin-top: 1px;
  }

  .entry {
    position: relative;
    min-height: 40px;
  }
  .entry:before {
    content: "";
    height: 100%;
    border-left: 2px solid #e1dcce;
    position: absolute;
    left: -15px;
  }
  .entry:after {
    content: "";
    width: 15px;
    border-top: 2px solid #e1dcce;
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: 1px;
  }
  .entry:first-child:before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 2px;
    border-radius: 10px 0 0 0;
  }
  .entry:first-child:after {
    height: 10px;
    border-radius: 10px 0 0 0;
  }
  .entry:last-child:before {
    width: 10px;
    height: 50%;
    border-radius: 0 0 0 10px;
  }
  .entry:last-child:after {
    height: 10px;
    border-top: none;
    border-bottom: 2px solid #e1dcce;
    border-radius: 0 0 0 10px;
    margin-top: -9px;
  }
  .entry.sole:before {
    display: none;
  }
  .entry.sole:after {
    width: 30px;
    height: 0;
    margin-top: 1px;
    border-radius: 0;
  }

  .label {
    display: block;
    width: 250px;
    padding: 5px 10px;
    line-height: 20px;
    text-align: start;
    border: 2px solid #e1dcce;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
    word-wrap: break-word;
  }
}

.non-split {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+, Chrome, Safari, Opera */
}
</style>

